<template>
    <div class="photoinf-container">
        <h3>{{photoinfo.title}}</h3>
        <p class="subtitle">
            <span>{{photoinfo.add_time|dateFormat}}:</span>
            <span>点击:{{photoinfo.click}}次</span>
        </p>
        <hr>

        <!--缩略图-->
        <!-- <div class="thumbs">
            <img class="preview-img" 
            v-for="(item, index) in list" :src="item.src" 
            :key="item.src" height="100" 
            @click="show(index)">
        </div> -->
        <vue-preview :slides="slide1" @close="handleClose"></vue-preview>
        

        <!--图片内容-->
        <div class="content" v-html="photoinfo.content">
            
        </div>
        <!--评论子组件-->
        <cmt-box :id='id'></cmt-box>
    </div>
</template>
<script>
import {Toast} from 'mint-ui'
import comment from '../subcomments/comment.vue'
    export default({
        data(){
            return{
                id:this.$route.params.id,
                photoinfo:[],
                list:[],
                slide1: []
            }
        },
        components:{
            "cmt-box":comment
        },
        created () {
            this.getPhotoInfo(),
            this.getThumbs()
        },
        methods: {
            getPhotoInfo(){
                this.$http.get('http://localhost:3000/newslist/?'+this.id).then(result=>{
                    if(result.body){
                        this.photoinfo=result.body[0]
                    }else{
                        Toast('获取失败')
                    }
                })
            },
            getThumbs(){
                this.$http.get('http://localhost:3000/newsimg1/').then(result=>{
                    if(result.body){
                        // result.body.forEach(item=>{
                        //     item.w=600
                        //     item.h=400
                        // })
                        this.slide1=result.body
                    }
                    console.log(this.slide1)
                })
            },
            handleClose(){
                console.log(this.slide1)
            }
        }
    })
</script>
<style lang="scss" scoped>
.photoinf-container{
    text-align:left;
    padding: 3px;
    h3{
        font-size: 15px;
        color: #26a2ff;
        text-align: center;
        margin: 15px 0;
    }
    .subtitle{
        display: flex;
        justify-content:space-between;
        font-size: 13px;
    }
    .content{
        font-size:13px;
        line-height:30px;
    }
    .thumbs{
        text-align: center;
        img{
            
            width: 80px;
            height: 80px;
            margin: 10px;
            box-shadow: 0 0 8px #ccc;
        }
    }
}
</style>
